<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>regExp</title>
    <style type="text/css">
pre{
    font-family: "Monaco";
    font-size: 16px;
    line-height: 22px;
}
    </style>
</head>
<body>

<pre>
复习字符串操作：
    search
    substring
    charAt
    split

正则：
    search  找到匹配的第一个位置
    match   把所有匹配的东西都提取出来 g
    replace 替换所有匹配  

</pre>


<h2>过滤敏感词汇</h2>
<textarea id="txt1" rows="5" cols="40">水电暖覅说北京,金丝大肥牛,套阿伯
淘宝你还百度水电费四</textarea><br>
<input id="btn1" type="button" value="filter"><br>
<textarea id="txt2" rows="5" cols="40"></textarea>


<h2>过滤html标签</h2>
<textarea id="txt3" rows="5" cols="40"></textarea><br>
<input id="btn2" type="button" value="filter"><br>
<textarea id="txt4" rows="5" cols="40"></textarea>


<h2>邮箱校验</h2>
<input id="txt5" type="text" />
<input id="btn5" type="button" value="check"><br>
<div id="emailCheckRes"></div>

<script>
// 1、复习字符串操作：
var str = 'abcdef';
var arr = '12-34-53-33'

console.log(str.search('b'));  //1
console.log(str.search('x'));  //-1
console.log(str.substring(2,5));  //cde
console.log(str.substring(1));    //bcedf
console.log(str.charAt(3));    //d
console.log(arr.split("-"));  //["12", "34", "53", "33"] 



// 2、找出字符串中的所有数字--字符串方法
var str2 = '12 fff 87 er334 233 -=-=fa80';
var numStr = '';
var numArr = []
for(var i=0; i<str2.length; i++){
    if(str2.charAt(i) >= '0' && str2.charAt(i) <= '9'){
        numStr += str2.charAt(i);
    }
    else{
        if(numStr){        
            numArr.push(numStr);
            numStr = "";
        }
    }
}
if(numStr){
    numArr.push(numStr);
    numStr = "";
}
console.log(numArr);



// 3、找出字符串中的所有数字--正则
console.log(str2.match(/\d+/g));


// 4、search
// var re = new RegExp('B','i');   //js风格
var re = /B/i                      //perl风格
console.log("abcdef".search(re));

// 找第一个数字出现的位置
console.log('asdf 32 53 sidfisdn'.search(/\d/));


// 5、match
// 找出所有的数字
console.log("asdf 34 656 cvs33".match(/\d/));  //["3", index: 5, input: "asdf 34 656 cvs33"]  
console.log(typeof "asdf 34 656 cvs33".match(/\d/));  //object 
// 上例中，计算机只为我们找出了第一个匹配的数字，如果要找出全部，要制定g-->global
console.log("asdf 34 656 cvs33".match(/\d/g));  //["3", "4", "6", "5", "6", "3", "3"] 
// 但是数字被一个一个切开了，如果我想要数字连着来呢？
console.log("asdf 34 656 cvs33".match(/\d+/g)); //["34", "656", "33"]


// 6、replace
// 仅仅是把第一个a替换为0
console.log("abc aaa erw".replace('a', '0'));  //0bc aaa erw 
// 字符串的replace方法配合正则用，能发挥最大用处
console.log("abc aaa erw".replace(/a/g, '0'));  //0bc 000 erw 


// 7、过滤敏感词汇--replace的应用
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    var re = /北京|百度|淘宝/g;
    txt2.value = txt1.value.replace(re,"***");
}


// 8、方括号 元字符
// [abc]
// [a-z0-9A-Z]
// [^a-z0-9A-Z]  除了[a-z0-9A-Z]的所有其他字符
console.log("apc xpc apc ppc bpc spc tpc".match(/[apx]pc/g));  //["apc", "xpc", "apc", "ppc"] 
console.log("as332491-2df".match(/[0-3]/g));  //["3", "3", "2", "1", "2"] 
console.log("as332491-2df".match(/[a-z]/g));  //["a", "s", "d", "f"] 
console.log("as332491-2df".match(/[^a-z]/g)); //["3", "3", "2", "4", "9", "1", "-", "2"] 

// 9、过滤html标签
var txt3 = document.getElementById("txt3");
var txt4 = document.getElementById("txt4");
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
    // /<.+>/g 是有问题的，如果整个文本以'<'开始，'>'结束，那么就把整个文本给匹配了;
    // 这就是正则'贪婪'的特性
    // 并不是任何字符都能出现在<>里面， 比如< < >, < > >, 肯定是有问题的
    // var re = /<.+>/g;
    var re = /<[^<>]+>/g;
    txt4.value = txt3.value.replace(re,"");
}


// 固定电话
// 010-87623712
// 87623712
// 010-87623712-2312
// (0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?
// console.log("010-87623712".)


// 10、邮箱校验--行首行尾
// 一串英文、数字、下划线 @ 一串英文、数字 . 一串英文
var txt5 = document.getElementById("txt5");
var btn5 = document.getElementById("btn5");
var emailCheckRes = document.getElementById("emailCheckRes");
btn5.onclick = function(){
    // var re = /\w+@[0-9a-z]+\.[a-z]+/i;
    // test 字符串一部分符合要求，就true
    // 如果邮箱写成山2---21@qq.com，也判断对

    var re = /^\w+@[0-9a-z]+\.[a-z]+$/i;
    if(re.test(txt5.value)){
        emailCheckRes.innerHTML = "ok";
    }else{
        emailCheckRes.innerHTML = "not legal";
    }
}


</script>
</body>
</html>